<script setup lang="ts">
import { ref, reactive } from 'vue';
// 省市区列表
import { areaList } from '@vant/area-data';
import axios from 'axios';

// 向后端传递的数据
const rentInfo = reactive({
    name: sessionStorage.username,
    telNumber: '',
    rentDate: '',
    address: '',
    dressname: ''
})

// 日历选择器
const calendarShow = ref(false);

// 格式化时间
const formatDate = (date: any) => {
    const day = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    return day;
};

// 选择时间提交
const onConfirm = (time: any) => {
    calendarShow.value = false;
    rentInfo.rentDate = formatDate(time);
};

// 地点选择
const addressShow = reactive({ value: false });

// 选择地点提交的信息
const addressInfo = (addressInfo: any) => {
    rentInfo.address = '';
    for (var i = 0; i < addressInfo.length; i++) {
        rentInfo.address += addressInfo[i].name;
    }
    addressShow.value = false;
};

// 预约婚纱选择
const dropDownValue = ref('0');
const dropDownOption = reactive([
    { text: '', value: '' },
]);

// 路由传参
const props = defineProps({
    dressid: String
})

// 判断是否有路由传参设置下拉框默认选项
if (props.dressid) {
    dropDownValue.value = props.dressid;
} else {
    dropDownValue.value = '0';
}

// 下拉菜单改变时婚纱图片和价格相应的变动
const dressInfo = reactive({
    image: '',
    price: ''
});

// 实时更新预定界面下拉菜单的option值
const showDressInfo = () => {
    axios.get('/api/rent/dropDownOption').then(res => {
        // 循环赋值，每循环一次，dropDownOption添加一个数组
        for (let dropDownOptionValue = 0; dropDownOptionValue < res.data.length; dropDownOptionValue++) {
            dropDownOption[dropDownOptionValue].text = res.data[dropDownOptionValue].dressname
            dropDownOption[dropDownOptionValue].value = `${res.data[dropDownOptionValue].dressid}`
            if (dropDownOption.length < res.data.length) {
                dropDownOption.push({ text: '', value: '' })
            }
        }
    })
}
showDressInfo()

// 选好之后显示选好婚纱的图片和价格
const showDressImagePrice = () => {
    axios.get('/api/rent/showImagePrice', { params: { dressid: dropDownValue.value } }).then(res => {
        dressInfo.image = res.data[0].dressphoto
        dressInfo.price = res.data[0].dressprice
        rentInfo.dressname = res.data[0].dressname
    })
}

// 解决Home首页点击去预定下拉菜单没有刷新图片的问题
if (props.dressid) {
    showDressImagePrice()
}

// 预定提交
const rentSubmit = () => {
    if(rentInfo.name == ''){
        alert('请输入姓名')
        return
    }else if(rentInfo.telNumber == ''){
        alert('请输入电话')
        return
    }else if(rentInfo.rentDate == ''){
        alert('请选择使用日期')
        return
    }else if(rentInfo.address == ''){
        alert('请输入地址')
        return
    }else if(rentInfo.dressname == ''){
        alert('请选择中意的婚纱')
        return
    }
    axios.post('/api/appointment/appointmentsubmit', rentInfo).then(res => {
        if(res.data.code == 200 ){
            alert('预约成功')
            window.location.href = '/RentRecord'
        }else {
            alert('预约失败，请联系管理员')
        }
    })
}

</script>

<template>
    <van-cell-group inset>
        <van-field v-model="rentInfo.name" label="姓名" placeholder="请输入收货者姓名" disabled/>
        <van-field v-model="rentInfo.telNumber" label="电话" placeholder="请输入收货者电话" />
        <van-cell title="预定日期" :value="rentInfo.rentDate" @click="calendarShow = true" />
        <van-calendar v-model:show="calendarShow" @confirm="onConfirm" :show-confirm="false" />
        <van-cell title="收货地址" :value="rentInfo.address" @click="addressShow.value = true" />
        <van-popup v-model:show="addressShow.value" position="bottom">
            <van-area title="收货地址" :area-list="areaList" :columns-num="3" @cancel="addressShow.value = false"
                @confirm="addressInfo">
            </van-area>
        </van-popup>
        <van-dropdown-menu>
            <van-dropdown-item v-model="dropDownValue" :options="dropDownOption" @change="showDressImagePrice" />
        </van-dropdown-menu>
        <van-image id="dressImage" v-if="dressInfo.image" width="10rem" height="10rem"
            :src="'/storage/images/' + dressInfo.image" />
        <van-cell id="price" v-if="dressInfo.price">{{ '价格：' }}{{ dressInfo.price }}</van-cell>
        <van-button type="primary" @click="rentSubmit">预约</van-button>
    </van-cell-group>
</template>

<style scoped lang="scss">
.van-cell-group {
    margin: 1rem;
    margin-top: 4rem;
    border-radius: 1rem;
    opacity: 0.9;
    width: calc(100% - 2rem);
    max-height: calc(100% - 7rem);
    overflow: scroll;
    position: absolute;
}

.van-cell {
    position: relative;

    :deep(.van-field__label) {
        margin-right: 0;
    }

    :deep(.van-cell__title) {
        width: 30%;
        flex: auto;
    }

    :deep(.van-cell__value) {
        width: 70%;
        flex: auto;
        text-align: left;
    }
}

.van-dropdown-menu {
    :deep(.van-dropdown-menu__item) {
        justify-content: left;
    }

    :deep(.van-dropdown-menu__title) {
        margin-left: 9px;
    }

    :deep(.van-popup--top) {
        left: 1rem;
        width: calc(100% - 2rem);
    }
}

.van-dropdown-item {
    :deep(.van-dropdown-item__option) {
        margin-left: 1rem;
        overflow: hidden;
    }

    :deep(.van-cell) {
        width: calc(100% - 1rem);
    }

    :deep(van-dropdown-item__content) {
        width: calc(100% - 1rem);
    }
}

.van-button {
    width: 8rem;
    text-align: center;
    height: 3rem;
    left: 50%;
    transform: translate(-50%);
    margin-top: 10%;
    margin-bottom: 5%;
}

#dressImage{
    margin-left: 50%;
    transform: translate(-50%);
}
#price {
    :deep(.van-cell__value){
        text-align: center;
    }
}
</style>